<template>
  <div class="page no-follow-config">
    <div>
      <div style="padding-bottom: 50px;">
        <group title="操作">
          <radio title="type" v-model="state" :options="states"></radio>
        </group>
        <group v-if="init" class="">
          <cell title="无成交订单" text-align="right" class="no-padding-right">
            <div>
              <cell title="" :value="'超过 ' + (releaseConfig.no_deal_day || 0) +' 天未跟进释放'" @click.native="config('no_deal_day')" is-link></cell>
              <cell title="" :value="'释放 ' + (releaseConfig.no_deal_limit_day  || 0) + ' 天内不允许抢'" @click.native="config('no_deal_limit_day')" is-link></cell>
            </div>
          </cell>
        </group>
        <panel header="成交订单说明:"  :list="list" :type="type"></panel>
        <button class="btn scrm-default-btn mgt-15" @click="saveConfig()">保存</button>
      </div>
    </div>
    <popup v-model="showPopup" class="configPopup">
      <group title="设置天数大约1且不能超过90天">
        <x-input :min="1" :max="2" type="number" title="设置天数" v-model="fieldVal" placeholder="请输入天数">
          <span class="prmiary-btn" slot="right" type="primary" mini @click="finish">完成</span>
          <span class="prmiary-btn darker" slot="right" type="primary" mini @click="cancel()">取消</span>
        </x-input>
      </group>
    </popup>
  </div>
</template>
<script>
  import Panel from 'vux/src/components/panel'
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import Radio from 'vux/src/components/radio'
  import Popup from 'vux/src/components/popup'
  import XInput from 'vux/src/components/x-input'
  import XButton from 'vux/src/components/x-button'
  import { mapActions, mapState } from 'vuex'
  import Q from 'q'

  export default {
    methods: {
      initReleaseConfig () {
        return Q.Promise((resolve, reject) => {
          this.getReleaseConfig(this.teamId).then((response) => {
            if (response.data.errcode === 0) {
              this.releaseConfig = response.data.results
              this.initState()
              this.initialState = this.state
              this.init = true
            }
            resolve()
          }).catch(() => {
            resolve()
          })
        })
      },
      initState () {
        this.state = this.releaseConfig.is_use_no_deal ? 1 : 0
      },
      saveConfig () {
        this.$vux.loading.show({text: '保存中...'})
        setTimeout(() => { this.$vux.loading.hide() }, 5000)
        return Q.Promise((resolve, reject) => {
          this.releaseConfig.team_id = this.teamId
          this.saveReleaseConfig(this.releaseConfig).then((response) => {
            if (response.data.errcode === 0) {
              this.initState()
              this.initialState = this.state
            }
            this.$vux.loading.hide()
            resolve()
          }).catch(() => {
            this.$vux.loading.hide()
            resolve()
          })
        })
      },
      config (field) {
        this.showPopup = true
        this.field = field
        this.fieldVal = this.releaseConfig[field]
        if (!this.releaseConfig[this.field + '_origin']) {
          this.releaseConfig[this.field + '_origin'] = this.releaseConfig[this.field]
        }
      },
      cancel () {
        if (this.releaseConfig[this.field + '_origin']) {
          this.releaseConfig[this.field] = this.releaseConfig[this.field + '_origin']
          this.releaseConfig[this.field + '_origin'] = null
        }
        this.showPopup = false
      },
      finish () {
        this.releaseConfig[this.field + '_origin'] = null
        this.showPopup = false
      },
      initialize () {
        this.$vux.loading.show({text: 'loading'})
        this.initReleaseConfig().then(() => {
          this.loading.hide()
        }).catch(() => {
          this.$vux.loading.hide()
        })
      },
      ...mapActions({
        'getReleaseConfig': 'getReleaseConfig',
        'saveReleaseConfig': 'saveReleaseConfig'
      })
    },
    computed: {
      ...mapState({
        team: state => state.app.user.teams ? state.app.user.teams[0] : []
      })
    },
    watch: {
      state (value) {
        this.releaseConfig.is_use_no_deal = value
        if (this.initialState !== value) {
          this.saveConfig()
        }
      },
      fieldVal (value) {
        if (this.field) {
          this.releaseConfig[this.field] = (value > 90 ? 90 : value) || 1
        }
      },
      team () {
        // if (!this.init) {
        //   this.initialize()
        // }
      }
    },
    components: {
      Group,
      Cell,
      Radio,
      Popup,
      XInput,
      XButton,
      Panel
    },
    mounted () {
      this.teamId = this.$route.query.team_id
      // if (this.team && this.teamId) {
      this.initialize()
      // }
      this.callJsApi('biz.navigation.setTitle', {title: '无成交释放设置'})
    },
    data () {
      return {
        teamId: '',
        enable: false,
        state: 0,
        fieldVal: null,
        showPopup: false,
        field: null,
        states: [{key: 1, value: '启用'}, {key: 0, value: '禁用'}],
        releaseConfig: {},
        init: false,
        type: '2',
        list: [{
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '',
          desc: '成交订单是以校务系统课程订单的完成状态为标准'
          // url: '/component/cell'
        }, {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '',
          desc: '所属顾问的客户名单在校务系统成交课程订单，则其客户名单数减少'
        }]
      }
    }
  }
</script>
<style lang="less">
  @import '../less/base';
</style>
